<template>
  <div class="userMgt">
    <div class="btnArea">
      <div>
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd()" v-has="{code:'sys:user:add',route:$route}">创建</el-button>
      </div>
      <div class="searchArea">
        <!-- <el-input v-model="input" class="searchInput" placeholder="请输入搜索内容" clearable />
        <el-button icon="el-icon-search">搜索</el-button> -->
      </div>
    </div>
    <el-dialog :title="dialogType==='edit'?'编辑用户':'创建用户'" :visible.sync="dialogFormVisible" @close="closeDialog('form')">
      <el-form ref="form" class="railForm" :model="form" :rules="rules" :label-width="formLabelWidth">
        <div class="flexBox">
          <el-form-item label="用户名称:" prop="username" class="flexFull">
            <el-input v-model="form.username" class="formInputW" />
          </el-form-item>
          <el-form-item label="账户昵称:" prop="nickName" class="flexFull">
            <el-input v-model="form.nickName"  class="formInputW" autocomplete="off" />
          </el-form-item>
          <el-form-item label="用户密码:" prop="password" class="flexFull">
            <el-input v-model="form.password" class="formInputW" autocomplete="off" />
          </el-form-item>
        </div>
        <div class="flexBox">
          <el-form-item label="手机号:" class="flexFull" prop="mobile">
            <el-input v-model="form.mobile" class="formInputW" autocomplete="off" />
          </el-form-item>
          <el-form-item label="email:" class="flexFull" prop="email">
            <el-input v-model="form.email" class="formInputW" autocomplete="off" />
          </el-form-item>
        </div>
        <div class="flexBox">
          <el-form-item label="用户可用:">
            <el-switch v-model="form.enabled" />
          </el-form-item>
          <el-form-item label="账户未过期:">
            <el-switch v-model="form.accountNonExpired" />
          </el-form-item>
          <el-form-item label="账户未锁定:">
            <el-switch v-model="form.accountNonLocked" />
          </el-form-item>
          <el-form-item label="密码未过期:">
            <el-switch v-model="form.credentialsNonExpired" />
          </el-form-item>
        </div>
        <div class="flexBox">
          <el-form-item label="角色:" class="roleSelectWrap">
            <el-select v-model="form.roleIds"
          
            multiple placeholder="请选择角色">
              <el-option v-for="item in roleLst" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('form')">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-dialog>
    <el-table :data="tableData" style="width: 100%" v-loading = "loading">
      <el-table-column prop="id" label="用户ID" />
      <el-table-column prop="username" label="用户名称" />
      <!-- <el-table-column prop="password" label="用户密码" /> -->
      
      <el-table-column label="角色">
        <template slot-scope="scope">
          <span v-for="tag in scope.row.roleList" :key="tag.id">
              <el-tag style="margin-right:5px;margin-bottom:5px" >
                {{tag.name}}
              </el-tag>
            </span>
        </template>
      </el-table-column>
      <el-table-column label="帐户是否过期">
        <template slot-scope="scope">
          <span v-if="scope.row.accountNonExpired">否</span>
          <span v-else>是</span>
        </template>
      </el-table-column>
      <el-table-column label="帐户是否锁定">
        <template slot-scope="scope">
          <span v-if="scope.row.accountNonLocked">否</span>
          <span v-else>是</span>
        </template>
      </el-table-column>
      <el-table-column label="密码是否过期">
        <template slot-scope="scope">
          <span v-if="scope.row.credentialsNonExpired">否</span>
          <span v-else>是</span>
        </template>
      </el-table-column>
      <el-table-column prop="nickName" label="昵称" />
      <el-table-column prop="mobile" label="手机号" />
      <el-table-column prop="email" label="邮箱" />
      <!-- <el-table-column prop="createDate" label="创建时间" /> -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <span class="tableEdit" @click="handleEdit(scope)" v-has="{code:'sys:user:edit',route:$route}">
            <i class="el-icon-edit" /> 编辑
          </span>
          <span class="tableDel" @click="handleDelete(scope)"  v-has="{code:'sys:user:delete',route:$route}">
            <i class="el-icon-delete" />删除
          </span>
        </template>
      </el-table-column>
    </el-table>
    <rail-pagination :page-info="pageInfo" @pagination="getTableData" />
  </div>
</template>

<script>
import railPagination from '@/components/railPagination/index'
import {
  deepClone
} from '@/utils'
const defaultForm = {
  id:null,
  username: '',
  password: '',
  accountNonExpired: true,
  accountNonLocked: true,
  credentialsNonExpired: true,
  enabled: true,
  nickName: '',
  mobile: '',
  email: '',
  roleIds: [],
}
export default {
  components: {
    railPagination
  },
  data() {
    return {
      loading:false,
      dialogFormVisible: false,
      dialogType: 'add',
      formLabelWidth: '120px',
      form: Object.assign({}, defaultForm),
      rules: {
        username: [{
          required: true,
          message: '用户名必填',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '密码必填',
          trigger: 'blur'
        }],
        mobile: [{
          required: true,
          message: '手机号必填',
          trigger: 'blur'
        }],
        email: [{
          required: true,
          message: '邮箱必填',
          trigger: 'blur'
        }],
      },
      pageInfo: {
        currentPage: 1,
        total: 0,
        pageSize: 10
      },
      input: '',
      tableData: [],
      roleLst:[]
    }
  },
  mounted() {
    this.getTableData(this.pageInfo)
    this.getRoleLst()
  },
  methods: {
    closeDialog(formName){
      this.$refs[formName].resetFields()
      this.dialogFormVisible = false
    },
    async getRoleLst(){
      let {data} = await this.$API.post('api/role/queryRolesList',{
          currentPage:1,
          "name": "",
          pageSize:99999
      })
      this.roleLst = data.records
    },
    async getTableData(val) {
      const {
        pageSize,
        currentPage
      } = val
      this.loading = true
      let {data} = await this.$API.post('api/user/queryUserList',{
        currentPage,
        pageSize,
        username:'',
        mobile:''
      })
      this.pageInfo.total = data.total
      this.tableData = data.records
      this.loading = false
    },
    async submitForm(formName) {
      this.$refs[formName].validate(async(valid) => {
        if (valid) {
          const type = this.dialogType == 'edit' ? '编辑' : '创建'
          let {
            id,
            username,
            password,
            accountNonExpired,
            accountNonLocked,
            credentialsNonExpired,
            enabled,
            nickName,
            mobile,
            email,
            roleIds} = this.form
          let params = {
            id,
            username,
            password,
            accountNonExpired,
            accountNonLocked,
            credentialsNonExpired,
            enabled,
            nickName,
            mobile,
            email,
            roleIds
          }
          if(this.dialogType != 'edit') delete params.id
          let {data} = await this.$API.post('api/user/userAdd',params)
          
          let pageInfo = this.pageInfo
          this.getTableData(this.pageInfo)
          this.$message({
            type: 'success',
            message: `${type}成功!`
          })
          this.dialogFormVisible = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.dialogFormVisible = false
    },
    handleAdd() {
      this.form = Object.assign({}, defaultForm)
      this.dialogType = 'add'
      this.dialogFormVisible = true
    },
    async handleEdit(scope) {
      const id = scope.row.id
      let {data} = await this.$API.post('/api/user/queryUserById',{id})
      this.form = deepClone(data)
      this.dialogType = 'edit'
      this.dialogFormVisible = true
    },
    async handleDelete({
      $index,
      row
    }) {
      const id = row.id
      const username = row.username
      this.$confirm(`确定删除 [ ${username} ] 用户?`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          let {data} = this.$API.post('api/user/deleteUserById',{id})
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.pageInfo.currentPage = 1
          this.getTableData(this.pageInfo)
        })
        .catch(err => {
          console.error(err)
        })
    }
  }
}

</script>

<style lang="scss" scoped>
  .btnArea {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .searchArea {
    display: flex;
    align-items: center;

    .searchInput {
      margin-right: 10px;
    }
  }

  .tableEdit {
    color: $themeColor;
    margin-right: 5px;
    cursor: pointer;
    font-size: 12px;
  }

  .tableDel {
    color: $themeColor;
    cursor: pointer;
    font-size: 12px;
  }

  .formInputW {
    max-width: 300px;
  }

</style>
<style scoped>
  .railForm /deep/.el-form-item__label {
    font-weight: 400;
  }

</style>
